<template>
  <view class="vouchers">
    <view class="navcon">
      <u-navbar placeholder title="领券中心"> </u-navbar>
    </view>
    <view class="voucherscontent">
      <view
        class="contentone"
        v-for="(item, index) in contentone"
        :key="index"
        @click="backcon(index)"
      >
        <view class="onetop">
          <view class="onetopleft">
            <view class="onetopleft1"> {{ item.text1 }} </view>
            <view class="onetopleft2"> {{ item.text2 }} </view>
          </view>
          <view class="onetopright"> {{ item.text3 }}</view>
        </view>
        <view class="twotop twotop1">
          <view class="twotopleft"> {{ item.text4 }} </view>
          <view class="twotopright"> {{ item.text5 }}</view>
        </view>
        <view class="twotop">
          <view class="twotopleft"> {{ item.text6 }} </view>
          <view class="twotopright"> {{ item.text7 }} </view>
        </view>
        <!-- 蒙层 -->
        <view class="back" v-show="item.change"></view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
const backcon = (index) => {
  if (contentone.value[index].change) {
    uni.showToast({
      title: "已领完",
      // icon:'none'
    });
  } else {
    contentone.value[index].change = true;
    uni.showToast({
      title: "领取成功",
      // icon:'none'
    });
  }
};
const contentone = ref([
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
    change: true,
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
    change: true,
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
    change: true,
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
    change: true,
  },
  {
    text1: "全",
    text2: "折扣券",
    text3: "2折",
    text4: "2023-03-2914:34~2023-03-29 14:34 ",
    text5: "满100元可用",
    text6: "全场产品使用",
    text7: "不限 已领100",
  },
]);
</script>

<style lang="scss" scoped>
.vouchers {
  .voucherscontent {
    padding: 30rpx;
    background-color: #f0f0f0;
    .contentone {
        box-shadow: 0 0 0.3125rem 0 #cfcfcf;
      position: relative;
      margin-bottom: 20rpx;
      padding: 20rpx;
      border-radius: 20rpx;
      border: 1px solid #e8e8e8;
      background-color: #fff;
    //   box-shadow: 0px 0px 4px #ececec;
      .onetop {
        padding: 6rpx 0rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .onetopleft {
          display: flex;
          align-items: center;

          .onetopleft1 {
            color: #fff;
            background-color: #f94369;
            width: 40rpx;
            line-height: 40rpx;
            font-size: 26rpx;
            text-align: center;
          }
          .onetopleft2 {
            color: #acacac;
            font-size: 32rpx;
            margin-left: 10rpx;
          }
        }
        .onetopright {
          color: #FA5086;
          font-size: 44rpx;
        }
      }
      .twotop {
        padding: 14rpx 0rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .twotopleft {
          color: #d3d3d5;
          font-size: 26rpx;
        }
        .twotopright {
          color: #d3d3d5;
          font-size: 26rpx;
        }
      }
      .twotop1{
        border-bottom: 1px solid #F2F2F2;
      }

      .back {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(244, 243, 243, 0.5);
        top: 0;
        left: 0;
        border-radius: 20rpx;
      }
    }
  }
}
</style>
